<template>
	<view>
		<view class="top">
			签到进度: {{ signInfo.signNum + '/' + signInfo.totalNum}}
		</view>
		<view>
			<view  class="list" v-for="item in signInfo.drillSigns">
				<view class="itemList">
					<view class="name">
						{{item.name}}
					</view>
					<view style="color: rgba(140, 140, 140, 1);" v-if="item.signFlag==1">
						{{item.signTime}}
					</view>
				</view>
				<view class="hui" v-if="item.signFlag==0">
					未签到
				</view>
				<view style="color: #0F53AC;" v-else @click="selectSign(item.signImg)">
					查看签名
				</view>
			</view>
			<view class="empty-data" v-if="!signInfo.drillSigns.length">
				<u-empty mode="data" :text="'暂无数据,当前培训无需签到'" :marginTop="100"></u-empty>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '', //应急演练id
				signInfo: {
					drillSigns: []
				},
				// isKecheng: true,
				// isKaoshi: true,
				// isQiandao: true
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getSigning()
		},

		methods: {

			//获取签到进度
			getSigning() {
				uni.$u.http.get(
					`/check/mobile/drillInfo/getDrillSignList/${this.id}`
				).then(res => {
					if (res.code == 0) {
						this.signInfo = res.data
					}
				}).catch(err => {})
			},

			//查看签名
			selectSign(signImg) {
				uni.$u.http.get(
					`/base/upload/bindFileUrl?fileUrl=${signImg}`
				).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: `/pages/subPackagesD/mycenter/sginselect?url=
        				${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
						})
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		padding: 28rpx 32rpx;
		background: #F5F5F5;
	}

	.list {
		padding: 32rpx 32rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f5f5f5;

		.itemList {
			display: flex;

			.name {
				color: #2B2B2B;
				margin-right: 20rpx;
			}
		}
	}

	.hui {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(125, 125, 125, 0.2);
		color: rgba(102, 102, 102, 1);
		text-align: center;
	}

	.lan {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(33, 115, 222, 0.2);
		color: rgba(25, 98, 224, 1);
		text-align: center;
	}

	.lv {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(40, 184, 105, 0.2);
		color: rgba(40, 184, 105, 1);
		text-align: center;
	}

	.hong {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(255, 77, 77, 0.2);
		color: rgba(255, 77, 77, 1);
		text-align: center;
	}
</style>
